<template>
	<view class="m-daily">

		<view class="top-user-info flex-row-start-start" :style="{top:userInfoTop+'rpx'}" v-if="myInfo">
			<view class="avatar-box" @click="handleUserInfoClick">
				<image class="cover-img avatar-img" :src="myInfo.photoUrl" mode="aspectFill"></image>
			</view>
			<view class="property-box flex-column-start-start">
				<view class="property-box-top flex-row-start-center">
					<view class="user-name-honer flex-column-start-center" @click="handleUserInfoClick">
						<view class="user-name flex-row-start-center">
							<view class="user-level flex-row-start-center">Lv.{{myInfo.level}}</view>
							<view class="user-nikName flex-row-start-center">
								{{truncateString(myInfo.nickName,3)}}
							</view>
						</view>
					</view>
					<view class="property-item flex-row-start-center">
						<view class="property-icon flex-row-center-center">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
								mode="aspectFill"></image>
						</view>
						<view class="property-inner flex-row-start-center">{{myInfo.bluePoint}}</view>
						<view class="property-add-icon flex-row-center-center">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="property-item flex-row-start-center">
						<view class="property-icon flex-row-center-center">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb5d7cac997f4eb5950dfadbf76813a0.png"
								mode="aspectFill"></image>
						</view>
						<view class="property-inner flex-row-start-center">{{myInfo.point}}</view>
						<view class="property-add-icon flex-row-center-center">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
								mode="aspectFill"></image>
						</view>
					</view>

				</view>
				<view class="property-box-bottom flex-row-start-start">
					<view class="job-name flex-row-center-center">{{myInfo.honor}}</view>
				</view>

			</view>



		</view>

		<view class="top-btn">
			<view class="btn-item" v-for="(item,index) in rightBtnList" :key="index" @click="handleBtnClick(item.type)">
				<view class="icon">
					<image class="icon-img" :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="btn-name">{{item.name}}</view>
			</view>

			<view class="change-main" @click="handleBtnClick('change')">
				<image class="change-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/872e923bc58641c6b198008cdc1f8451.png"
					mode="aspectFill"></image>
			</view>

		</view>

		<view class="bottom-masker"></view>
		<view class="bottom-btn">
			<view class="btn-item flex-column-start-center" v-for="(item,index) in bottomBtnList"
				:class="{'dice-btn':item.type=='dice'}" :key="index" @click="handleBtnClick(item.type)">
				<view class="icon" v-if="item.type!='dice'">
					<image class="icon-img" :src="item.icon" mode=""></image>
				</view>
				<view class="btn-name" v-if="item.type!='dice'">{{item.name}}</view>

				<view class="dice-content" v-if="item.type=='dice'">
					<image class="cover-img" v-show="showDiceImg" @touchstart.stop="handleDiceClick" :src="diceImg"
						mode="aspectFill"></image>
				</view>
				<view class="power-box flex-row-center-center" v-if="item.type=='dice'">
					<view class="power-inner flex-row-start-center" v-if="myInfo">
						{{myInfo.diceCount}}/{{myInfo.diceLimit}}
						<view class="add-icon flex-row-center-center">
							<image class="add-icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<!-- v-if="item.type=='equip'&&goodSFlyList.length>1" -->
				<!-- :class="{'delay1':gIndex==1,'delay2':gIndex==2,'delay3':gIndex==3,'delay4':gIndex==4}" -->


				<template>
					<view class="bag-btn-fly " v-if="item.type=='equip'&&goodSFlyList.length>1"
						v-for="(gItem,gIndex) in goodSFlyList" :key="gIndex"
						:class="{'green-good':gItem.RarityLevel==1,'orange-good':gItem.RarityLevel==2,'blue-good':gItem.RarityLevel==3,'purple-good':gItem.RarityLevel==4,'delay1':gIndex==1,'delay2':gIndex==2,'delay3':gIndex==3,'delay4':gIndex==4}">
						<image class="cover-img" :src="gItem.imageUrl" mode="aspectFill"></image>

					</view>
				</template>
				<template v-if="item.type=='equip'&&goodSFlyList.length==1">
					<view class="bag-btn-fly" v-for="(gItem,gIndex) in goodSFlyList" :key="gIndex"
						:class="{'green-good':gItem.RarityLevel==1,'orange-good':gItem.RarityLevel==2,'blue-good':gItem.RarityLevel==3,'purple-good':gItem.RarityLevel==4}">
						<image class="cover-img" :src="gItem.imageUrl" mode="aspectFill"></image>
					</view>
				</template>


			</view>
		</view>


		<view class="active-banner" @click="handleBtnClick('active')">
			<image class="cover-img"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3b70c2f6693f4f44825829ca526590f3.jpg"
				mode="aspectFill"></image>
		</view>


		<!-- 		<view class="phone-btn" @click="handlePhoneClick">
			<image class="phone-btn-img"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b2b8e98dc8974eeabf370749528ae388.png"
				mode="aspectFill"></image>
			<view class="red-point"></view>
		</view> -->

		<!-- 		<view class="result-box flex-row-center-center">
			<view class="left-content flex-row-center-center" :class="{'result-touch':isTouchNow&&resultTouchIndex==0}"
				@touchstart="handleResultTouchStart(0)" @touchend="handleResultTouchEnd('event')"
				@touchcancel="handleResultTouchCancel">
				<view class="leader-point flex-row-center-center" v-if="isGetEvent">
					<view class="leader-point-inner flex-row-center-center">
						<view class="leader-point-inner-content flex-row-center-center"></view>
					</view>
				</view>
				<view class="left-dice">
					<view class="dice-box">
						<view class="icon-content">
							<image class="dice-icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/663d71a0a33641f9a4d0ef1400be8ceb.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<text class="result-num">5</text>
				</view>
				<view class="right-tip">
					<view class="top-title">通关剧情</view>
					<view class="bottom-number">1-5(0/1)</view>
				</view>
			</view>

			<view class="result-auto-btn flex-row-center-center"
				:class="{'result-touch':isTouchNow&&resultTouchIndex==1}" @touchstart="handleResultTouchStart(1)"
				@touchend="handleResultTouchEnd('auto')" @touchcancel="handleResultTouchCancel">
				<image class="cover-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/704de2f85e8149288f8da240406a1a35.png"
					mode="aspectFill"></image>
			</view>
		</view> -->

		<!-- company-btn -->
		<view class="room-btn " @click="handleBtnClick('room')" :class="{'room-btn-active':roomBtnClicked}">
			<view class="room-btn-content flex-row-center-end">
				<image class="room-btn-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a6d10809c1dc46a9bcbc4442bb5026c3.png"
					mode="aspectFill"></image>
				<view class="room-text">房间</view>
			</view>
			<view class="room-btn-line">
				<view class="room-btn-line-content"></view>
			</view>
			<image class="room-btn-fast-icon"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5732440ddf8642799d477ef01a56a872.png"
				mode="aspectFill"></image>
		</view>
		<view class="room-btn company-btn" @click="handleBtnClick('company')"
			:class="{'room-btn-active':companyBtnClicked}">

			<view class="room-btn-content flex-row-center-end">
				<image class="room-btn-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/537807c54e154ef681681e9ad5f2e79f.png"
					mode="aspectFill"></image>
				<view class="room-text">公司</view>
			</view>


			<view class="room-btn-line">
				<view class="room-btn-line-content"></view>
			</view>

			<image class="room-btn-fast-icon"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5732440ddf8642799d477ef01a56a872.png"
				mode="aspectFill"></image>
		</view>



		<!-- 
		<view class="test-left">

		</view>
		<view class="test-right">

		</view> -->


		<!-- 挑战 -->
		<!-- 		<view class="go-pk" @click="handleGoPkClick">
			<image class="go-pk-icon"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/75dff41d5032450c9c131348f46e4660.png"
				mode=""></image>
		</view> -->



		<pkModal ref="pkModal" @toChangeRoleClothes="toChangeRoleClothes" @modalResult="pkModalResult" />

		<typeModal ref="typeModal" @modelResult="modelResult" :storyId="storyId" @close="handleModalClose" />

		<!-- 	<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241108/VID2e2987fd/VID2e2987fd.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"></video> -->

		<lSvga ref="lSvga" @played="handleSvgaPlayEnd" style="pointer-events: none!important;" :zIndex="7"></lSvga>
		<mPop ref="mPop">
			<view class="events-pop flex-column-start-center">
				<view class="close-pop-icon flex-row-center-center">
					<image class="close-pop-icon-img" @click="handleClosePop"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/60cd2a758a6644e6af22b5869bef0618.png"
						mode="aspectFill"></image>
				</view>
				<view class="events-pop-title">待办事项</view>
				<view class="event-list">
					<scroll-view ref="scrollView" scroll-y class="scroll-content event-scroll-content"
						:show-scrollbar="false" :scroll-with-animation="true">
						<view class="event-list-content">
							<view class="event-item flex-row-start-center" v-for="(item,index) in eventWaitList"
								:key="index">
								<view class="event-icon">
									<image class="cover-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5965e6d4144b168171a0cf5f3c428c.png"
										mode="aspectFill"></image>

									<view class="event-reward-num">3</view>
								</view>
								<view class="event-content flex-column-center-start">
									<view class="event-title">{{item.title}}</view>
									<view class="event-text">{{item.text}}</view>
								</view>
								<view class="event-go-to flex-row-center-center">
									<view class="event-go-to-text">前往</view>
									<image class="event-go-to-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b4e0efdb16504a3782576de3dc5b7441.png"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>

			</view>
		</mPop>

	</view>
</template>

<script>
	import pkModal from './pk-modal.vue'
	import typeModal from './type-modal.vue'
	import lSvga from '@/components/l-svga/index.vue'
	import mPop from "@/components/m-pop/index.vue"
	import {
		mapActions
	} from "vuex";
	import {
		playDice,
		getMyInfo
	} from "@/api/game.js"
	import {
		truncateString
	} from '@/utils/tools.js'


	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			},
			gameId: {
				type: [Number, String],
				default: ""
			},
		},
		components: {
			pkModal,
			typeModal,
			lSvga,
			mPop,
		},
		data() {
			return {
				myInfo: null,
				getEventTimeOutId: null,
				isGetEvent: false,
				eventDataList: [{
						eventType: "event-default-bodyBuilding",
						name: "健身",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e427fa477e5b468c8d71e413009c51b9.png"
					},
					{
						eventType: "event-default-meeting",
						name: "会议",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/490d90106a0f45a0a1a18d4958c14292.png"
					},
					{
						eventType: "event-default-interview",
						name: "面试",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3c052eb8ce81409188e2e3b853f090b5.png"
					},
					{
						eventType: "event-default-dance",
						name: "舞会",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e62c32be57704f4a8f55c4663cb6b025.png"
					},
					{
						eventType: "event-default-date",
						name: "约会",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d082c3915b6443b2b20cd9a0c960f335.png"
					},
					{
						eventType: "event-default-brave",
						name: "见义勇为",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/132db310a99e42eb914012b4b7790cf3.png"
					},
					{
						eventType: "event-default-inspection",
						name: "视察",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cd04521409d4ca8818a7f1e72987401.png"
					},
					{
						eventType: "event-default-signContract",
						name: "合同签约",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c284f8fd26904e7085e397f163a9112e.png"
					},
					{
						eventType: "event-default-strategy",
						name: "战略合作",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/af3c1dcbe2ae488fb53543a744675d1d.png"
					},
					{
						eventType: "event-default-bonus",
						name: "奖金",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83ef41505ce6446ba714e3dc58d88127.png"
					},
					{
						eventType: "event-default-teamBuilding",
						name: "公司团建",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f4eb9eae14e141998784d086098db566.png"
					},

					{
						eventType: "event-interactive-dance-fullyOpen",
						name: "舞力全开",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cbe360da9fe470f89a8cd55958303f3.png"
					},
					{
						eventType: "event-interactive-dance-supremacy",
						name: "舞林争霸",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/73857192e90d41e49607a866b77f46a0.png"
					},
					{
						eventType: "event-interactive-dance-exclusiveRespect",
						name: "唯舞独尊",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb74b6b4334f41f081a1d210260abec6.png"
					},
					{
						eventType: "event-interactive-dance-moveUniverse",
						name: "舞动乾坤",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8e57a7ba06d243538071bb8e49b4bf17.png"
					},
					{
						eventType: "event-interactive-travel",
						name: "旅行",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c00f1f648e924cfaa4dfcc7ddceeeec3.png"
					},


				],
				eventWaitList: [{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
					{
						title: "领取生活收益",
						text: "生活收益满满当当，快来领取把!",
					},
				],
				// 收纳物品列表
				goodSFlyList: [],
				// 骰子相关数据
				nowPower: 120,
				totalPower: 200,
				isTouchNow: false,
				resultTouchIndex: 0,
				showDiceImg: true,
				defaultDiceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5965e6d4144b168171a0cf5f3c428c.png",
				diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5965e6d4144b168171a0cf5f3c428c.png",
				diceResultList: [{
						title: "会议",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7ff07f3df77b40d6a8446cf71029b950.png",
					},
					{
						title: "直播",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5f95c6d0a147457aa8430e482b76463a.png",
					},
					{
						title: "视察工作",
						diceImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/60d437e96b5447c7b3bb2af1f0d9c2a0.png",
					},
				],
				// 
				roomBtnClicked: false,
				companyBtnClicked: false,
				totalSpirit: 200,
				nowSpirit: 20,
				jumpMphoneStoryId: "",
				teamJumpStoryId: "",
				jumpRoomStoryId: "",
				jumpCompanyStoryId: "",
				jumpLuckDrawStoryId: "",
				jumpStoryId: "",
				userAvatarJumpId: "",
				jumpChangeMainStoryId: "",
				pkJumpId: "",

				infinityStoryId: "",
				pvpStoryId: "",
				rankStoryId: "",
				userName: "一号收割机",
				avatar: "",
				damon: 500,
				userInfoTop: 80,
				level: 30,
				rightBtnList: [{
						name: "排名",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/faa0fe78e4a446a7a1793ea83657c602.png",
						type: "sort"
					},
					{
						name: "商店",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5e897309f798463fb947d59992b718a5.png",
						type: "shop"
					},

					{
						name: "日程",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7d33fac6bfbd479794f12042f712ce00.png",
						type: "task"
					},

					{
						name: "心动",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/705e139d223a4a0da10530d0f451c7cd.png",
						type: "invite"
					}



				],
				bottomBtnList: [{
						name: "舞姬",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ad5dbd03a6404b9a9c2c9a3d58ea782f.png",
						type: "team"
					},
					{
						name: "背包",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/976e9657b2214490a292f2585582c550.png",
						type: "equip"
					},
					{
						name: "骰子",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5965e6d4144b168171a0cf5f3c428c.png",
						type: "dice"
					},
					{
						name: "休闲",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3075c81a6f7b4c18b57fac8735302d4b.png",
						type: "travel"
					},
					{
						name: "竞技",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5eff18f1014a4a66ac33afdc732b436e.png",
						type: "pk"
					},
					// {
					// 	name: "心动",
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/705e139d223a4a0da10530d0f451c7cd.png",
					// 	type: "invite"
					// }



					// {
					// 	name: "公司",
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2a57bdb0495c49cfbb04d18cada93a20.png",
					// 	type: "story"
					// },



				]


			}
		},
		created() {
			this.handleGetMyInfo()
		},
		mounted() {
			this.getProps()
		},
		methods: {
			...mapActions(["getRoomCardDetail"]),
			truncateString,
			handleGetEvent() {
				if (this.getEventTimeOutId) {
					clearTimeout(this.getEventTimeOutId)
				}
				this.isGetEvent = true
				this.getEventTimeOutId = setTimeout(() => {
					this.isGetEvent = false
				}, 1200)
			},
			handleClosePop() {
				if (this.$refs.mPop) {
					this.$refs.mPop.close()
				}
			},
			// 收纳物资
			handleGetGoods(type, rewardList) {
				if (type == 'goods') {
					this.goodSFlyList = [...rewardList]

				} else if (type == 'events') {

				}


				setTimeout(() => {
					this.goodSFlyList = []
				}, 1200)



			},
			// 骰子相关
			handleModalClose(data) {
				let rewardsList = data.rewardsList
				if (String(data.eventType).includes('default')) {
					this.handleGetGoods('goods',
						rewardsList
					)

				} else if (String(data.eventType).includes('event-interactive')) {
					this.handleGetEvent()
				}
				this.diceImg = this.defaultDiceImg
			},
			handleGetRandomResult() {
				const randomIndex = Math.floor(Math.random() * this.eventDataList.length); // 生成随机索引
				return this.eventDataList[randomIndex]
			},
			handleSvgaPlayEnd() {
				// let data = this.handleGetRandomResult()
				// this.diceImg = data.diceImg
				// this.showDiceImg = true
				this.handlePlayDice().then(res => {
					let data = {
						...res,
						eventType: "default"
					}
					this.diceImg = data.diceUrl
					this.showDiceImg = true

					// 第二个参数传入事件类型以及相关数据
					this.$refs.typeModal.open('event', {
						...data
					})

					this.dicResultTimeOutId = setTimeout(() => {
						this.diceImg = this.defaultDiceImg
					}, 1000)

				})




				return


			},
			initSvga() {
				let style =
					"width:190rpx;height:190rpx;position:absolute;bottom:40rpx;left:50%;transform: translateX(-50%);"
				this.$refs.lSvga.changeSvgaStyle(style)
			},
			// 获取用户数值信息
			handleGetMyInfo() {
				let gameId = this.globalGameCtx.gameId
				getMyInfo({
					gameId
				}).then(res => {
					this.myInfo = res.data.result
				})
			},
			// 日理万机骰子点击
			handlePlayDice() {
				return new Promise((resolve, reject) => {
					let gameId = this.globalGameCtx.gameId
					playDice({
						gameId
					}).then(res => {
						let result = res.data.result
						result.rewardsList = [...res.data.result.rewardsList].map((item, index) => {
							return {
								...item,
								RarityLevel: !item.rare ? 0 : item.rare
							}
						})


						resolve(result)
					}).catch(err => {
						reject(err)
					})
				})

			},
			handleDiceClick() {

				if (this.dicResultTimeOutId) {
					clearTimeout(this.dicResultTimeOutId)
					this.dicResultTimeOutId = null
				}
				this.nowPower--
				this.showDiceImg = false
				this.$refs.lSvga.playSvga({
					svgaSrc: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/svga/fc7ee4c7834a448bb07c426cc9ad2e7f.svga",
					audioSrc: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/e163cede3ffe487ba7594f73fb3e1ade.MP3"
				})
			},
			handleResultTouchCancel() {
				this.isTouchNow = false
			},
			handleResultTouchEnd(type) {
				if (type == 'event' && this.$refs.mPop) {
					// this.$refs.mPop.open()
				}
				this.isTouchNow = false
			},
			handleResultTouchStart(index) {
				this.isTouchNow = true
				this.resultTouchIndex = index
			},
			// 

			handlePhoneClick() {
				if (this.jumpMphoneStoryId) {
					this.$emit("getGameResult", String(this.jumpMphoneStoryId))
				}
			},
			pkModalResult(data) {
				// console.log("被点击的类型是", e);
				let {
					type,
					storyId
				} = data
				if (storyId) {
					this.$emit("getGameResult", String(storyId))
				}

			},

			modelResult(data) {
				// this.$emit("getGameResult", String(e))
				if (data.type == 'pk') {
					this.handleBtnClick('pk')
				} else if (data.type == 'travel') {
					if (data.storyId) {
						this.$emit("getGameResult", String(data.storyId))
					}
				}

			},
			toStory(e) {
				// this.$emit("getGameResult", String(e))
				this.$emit("getGameResult", String(this.jumpStoryId))
			},
			toTeamMenberDetail(e) {
				this.$emit("getGameResult", String(e))
			},
			seekTime(e) {
				this.$emit("getGameResult", Number(e))
			},
			toChangeRoleClothes() {
				if (this.pkJumpId) {
					this.$emit("getGameResult", this.pkJumpId)
				}
			},
			handleGoPkClick() {
				this.$refs.pkModal.open('模式选择')
			},
			getProps() {
				let paramsJson = this.paramsJson
				this.userAvatarJumpId = paramsJson.userAvatarJumpId && paramsJson.userAvatarJumpId.default ? paramsJson
					.userAvatarJumpId.default :
					this
					.userAvatarJumpId
				this.pkJumpId = paramsJson.pkJumpId && paramsJson.pkJumpId.default ? paramsJson.pkJumpId.default : this
					.pkJumpId

				this.jumpStoryId = paramsJson.jumpStoryId && paramsJson.jumpStoryId.default ? paramsJson.jumpStoryId
					.default : this
					.jumpStoryId
				this.teamJumpStoryId = paramsJson.teamJumpStoryId && paramsJson.teamJumpStoryId.default ? paramsJson
					.teamJumpStoryId.default : this
					.teamJumpStoryId
				this.jumpLuckDrawStoryId = paramsJson.jumpLuckDrawStoryId && paramsJson.jumpLuckDrawStoryId.default ?
					paramsJson
					.jumpLuckDrawStoryId.default : this
					.jumpLuckDrawStoryId
				this.jumpCompanyStoryId = paramsJson.jumpCompanyStoryId && paramsJson.jumpCompanyStoryId.default ?
					paramsJson
					.jumpCompanyStoryId.default : this
					.jumpCompanyStoryId
				this.jumpRoomStoryId = paramsJson.jumpRoomStoryId && paramsJson.jumpRoomStoryId.default ?
					paramsJson
					.jumpRoomStoryId.default : this
					.jumpRoomStoryId


				this.infinityStoryId = paramsJson.infinityStoryId && paramsJson.infinityStoryId.default ?
					paramsJson
					.infinityStoryId.default : this
					.infinityStoryId
				this.pvpStoryId = paramsJson.pvpStoryId && paramsJson.pvpStoryId.default ?
					paramsJson
					.pvpStoryId.default : this
					.pvpStoryId
				this.rankStoryId = paramsJson.rankStoryId && paramsJson.rankStoryId.default ?
					paramsJson
					.rankStoryId.default : this
					.rankStoryId
				this.jumpChangeMainStoryId = paramsJson.jumpChangeMainStoryId && paramsJson.jumpChangeMainStoryId.default ?
					paramsJson
					.jumpChangeMainStoryId.default : this
					.jumpChangeMainStoryId

				this.jumpMphoneStoryId = paramsJson.jumpMphoneStoryId && paramsJson.jumpMphoneStoryId.default ?
					paramsJson
					.jumpMphoneStoryId.default : this
					.jumpMphoneStoryId

				this.initSvga()

			},
			handleUserInfoClick() {
				// console.log("用户信息点击");
				// if (this.userAvatarJumpId) {
				// 	this.$emit("getGameResult", String(this.userAvatarJumpId))
				// }

				return



				this.handleBtnClick('user')
			},
			handleBtnClick(type) {
				// console.log("按钮被点击了");
				switch (type) {
					case 'room':
						this.roomBtnClicked = true
						setTimeout(() => {
							this.roomBtnClicked = false
						}, 500)

						// if (this.jumpRoomStoryId) {
						// 	this.$emit("getGameResult", String(this.jumpRoomStoryId))
						// }

						this.getRoomCardDetail({
							gameId: this.gameId,
							cardId: "1881255622456713218"
						}).then(res => {
							this.$emit("getGameResult", "S053VVF")
						})



						break;
					case 'shop':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('shop')
						}
						break;
					case 'active':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('active')
						}
						break;
					case 'sort':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('sort')
						}
						break;
					case 'task':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('task')
						}
						break;
					case 'team':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('team',
								"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/efa0dcc143404a61b4a0b690b8920472.jpg",
								this.teamJumpStoryId
							)
						}
						break;
					case 'equip':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('equip',
								"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fe4901f2aecf412da76ca07f1af60459.jpg"
							)
						}

						break;
					case 'travel':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('travel')
						}
						break;
					case 'invite':
						if (this.jumpLuckDrawStoryId) {
							this.$emit("getGameResult", this.jumpLuckDrawStoryId)
						}
						break;
					case 'company':
						this.companyBtnClicked = true
						setTimeout(() => {
							this.companyBtnClicked = false
						}, 500)
						if (this.jumpCompanyStoryId) {
							this.$emit("getGameResult", this.jumpCompanyStoryId)
						}
						break;

					case 'user':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('user')
						}
						break;
					case 'pk':
						this.handleGoPkClick()
						break;
					case 'base':
						this.$emit("getGameResult", 'start')
						break;
					case 'change':
						if (this.jumpChangeMainStoryId) {
							this.$emit("getGameResult", this.jumpChangeMainStoryId)
						}
						break;
					default:
						break;
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.pkVideo {
		position: absolute;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index: -1;
	}

	.test-left {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 40rpx;
		top: 900rpx;
		background-image: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/07051e24ddde4204970b229cf7e3204a.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.test-right {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 40rpx;
		top: 900rpx;
		background-image: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9ba451fa76624372bd67151ced89028b.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.m-daily {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999999999999999;
		pointer-events: none;

		.events-pop {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, .9);
			backdrop-filter: blur(10rpx);
			border-radius: 10rpx 10rpx 0rpx 0rpx;

			.close-pop-icon {
				width: 100%;

				.close-pop-icon-img {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.events-pop-title {
				width: 100%;
				font-size: 26rpx;
				line-height: 26rpx;
				font-weight: 700;
				box-sizing: border-box;
				padding: 0rpx 40rpx;

			}

			.event-list {
				position: relative;
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				padding-bottom: 30rpx;

				.event-scroll-content {
					-webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8)20rpx, rgba(255, 255, 255, 1));
				}

				.event-list-content {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx 40rpx;
					padding-bottom: 10rpx;
				}

				.event-item {
					width: 100%;
					height: 130rpx;
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
					margin-bottom: 20rpx;
					background-color: rgba(255, 255, 255, .6);
					border-radius: 8rpx;

					.event-icon {
						position: relative;
						width: 130rpx;
						height: 130rpx;
						box-sizing: border-box;
						padding: 10rpx;

						.event-reward-num {
							position: absolute;
							right: 10rpx;
							bottom: 10rpx;
							font-size: 16rpx;
							line-height: 16rpx;
							padding: 5rpx;
							background-color: rgba(0, 0, 0, .3);
							color: #fff;
						}
					}

					.event-content {
						flex: 1;
						height: 100%;

						.event-title {
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 700;
							margin-bottom: 20rpx;
						}

						.event-text {
							font-size: 22rpx;
							line-height: 22rpx;

						}
					}

					.event-go-to {
						width: 130rpx;
						height: 130rpx;
						font-size: 30rpx;
						line-height: 30rpx;

						.event-go-to-icon {
							width: 25rpx;
							height: 25rpx;
							margin-left: 5rpx;
						}
					}


				}


			}
		}




		@keyframes fMoveX {
			0% {
				transform: translateX(0rpx);
			}

			90% {
				transform: translateX(-180rpx);
			}

			100% {
				transform: translateX(-180rpx);
			}
		}

		@keyframes cMoveY {
			0% {
				transform: translateY(0rpx);
			}

			90% {
				transform: translateY(720rpx);
			}

			100% {
				transform: translateY(720rpx);
			}
		}

		@keyframes gcScale {
			0% {
				opacity: 0.85;
			}

			10% {
				opacity: 1;
			}


			90% {
				opacity: 1;
				transform: scale(1);
			}

			100% {
				opacity: 0;
				transform: scale(1.2);
			}
		}


		.top-user-info {
			position: absolute;
			left: 0rpx;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			pointer-events: fill;

			.avatar-box {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background-color: #fff;
				box-sizing: border-box;
				padding: 1rpx;
				box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .6);

				.avatar-img {
					border-radius: 50%;
				}

			}

			.property-box {
				flex: 1;
				height: 100%;
				box-sizing: border-box;
				padding-top: 5rpx;
				margin-left: 8rpx;

				.property-box-top {
					width: 100%;
				}

				.property-box-bottom {
					width: 100%;
					margin-top: 10rpx;
				}

				.job-name {
					width: 110rpx;
					background-image: linear-gradient(to right, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .1)10%, rgba(0, 0, 0, .1)90%, rgba(0, 0, 0, 0)100%);
					font-size: 18rpx;
					// 
					line-height: 30rpx;
					color: #fff;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .1);
				}


				.user-name-honer {
					height: 100%;
					margin-right: 20rpx;
					width: 150rpx;

					.user-name {
						width: 100%;
						height: 30rpx;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);

						.user-level {
							// width: 50rpx;
							height: 100%;
							margin-right: 5rpx;
						}

						.user-nikName {
							flex: 1;
							height: 100%;
						}
					}

				}

				.property-item {
					position: relative;
					width: 120rpx;
					height: 30rpx;
					background-color: rgba(0, 0, 0, .1);
					border-radius: 15rpx;
					margin-right: 20rpx;
					box-sizing: border-box;
					padding-left: 35rpx;
					padding-right: 35rpx;

					.property-icon {
						position: absolute;
						left: -10rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 35rpx;
						height: 35rpx;

					}

					.property-inner {
						flex: 1;
						height: 100%;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
					}

					.property-add-icon {
						position: absolute;
						right: 5rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 25rpx;
						height: 25rpx;
						box-sizing: border-box;
						padding: 5rpx;
					}

				}
			}
		}


		.top-btn {
			position: absolute;
			// right: 30rpx;
			left: 30rpx;
			top: 250rpx;
			// width: 60rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.btn-item {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 50rpx;
				// background-color: pink;
				pointer-events: fill;
				border-radius: 50%;
				// background-color: rgba(0, 0, 0, .1);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 100%;
					height: 100%;

					.icon-img {
						width: 100%;
						height: 100%;
					}
				}

				.btn-name {
					width: 100%;
					height: 30rpx;
					font-size: 20rpx;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .5);
					position: absolute;
					left: 0;
					bottom: -28rpx;
					text-align: center;
					color: #fff;
					line-height: 30rpx;
				}
			}

			.change-main {
				width: 50rpx;
				height: 50rpx;
				background-color: rgba(0, 0, 0, .05);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: inset 0rpx 0rpx 4rpx rgba(255, 255, 255, .8);

				.change-img {
					width: 60%;
					height: 60%;
				}



			}
		}

		.result-box {
			position: absolute;
			left: 30rpx;
			bottom: 200rpx;
			pointer-events: fill;

			.left-content {
				position: relative;
				width: 200rpx;
				height: 50rpx;
				background-color: rgba(0, 0, 0, .1);
				border-radius: 25rpx;
				box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .6);
				margin-right: 10rpx;
				transition: transform 0.3s;

				.leader-point {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					z-index: 10;
					pointer-events: none;

					.leader-point-inner {
						position: relative;
						width: 100%;
						height: 100%;
						border-radius: 50%;

						.leader-point-inner-content {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, .8);
							box-sizing: border-box;
							padding: 25rpx;
							animation: leaderBreath 0.6s linear infinite;

							&::after {
								content: "";
								width: 100%;
								height: 100%;
								border-radius: 50%;
								box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, .8);
							}

						}



					}
				}

			}

			.get-event {}

			@keyframes leaderBreath {
				0% {
					transform: scale(1);

				}

				50% {
					transform: scale(0.6);

				}

				100% {
					transform: scale(1);
				}
			}








			.left-dice {
				position: relative;
				width: 50rpx;
				height: 50rpx;

				.result-num {
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
					display: inline-block;
					padding: 3rpx;
					background-color: rgba(0, 0, 0, .1);
					font-size: 12rpx;
					line-height: 12rpx;
					color: #fff;
					z-index: 9;
				}

				.dice-box {
					position: absolute;
					left: 50%;
					top: 50%;
					width: 60rpx;
					height: 60rpx;
					transform: translate(-50%, -50%);
					background-color: transparent;
					border-radius: 50%;

					.icon-content {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						// background-color: rgba(255, 255, 255, .5);
						// box-shadow: 0rpx 0rpx 4rpx #fff;
						backdrop-filter: blur(15rpx);
						box-sizing: border-box;
						padding: 6rpx;
						box-shadow: inset 0rpx 0rpx 15rpx rgba(255, 255, 255, .6);

						.dice-icon-img {
							width: 100%;
							height: 100%;
						}
					}

				}
			}

			.right-tip {
				flex: 1;
				height: 100%;
				margin-left: 15rpx;
				box-sizing: border-box;
				padding: 5rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.top-title {
					width: 100%;
					flex: 1;
					font-size: 16rpx;
					line-height: 16rpx;
					color: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.bottom-number {
					width: 100%;
					flex: 1;
					font-size: 16rpx;
					line-height: 16rpx;
					color: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.result-auto-btn {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: 9;
				background-color: rgba(0, 0, 0, .1);
				box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .6);
				padding: 5rpx;
				transition: transform 0.3s;
				opacity: 0;

			}


		}

		.result-touch {
			transform: scale(0.9);
		}


		.phone-btn {
			position: absolute;
			left: 30rpx;
			bottom: 300rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, .05);
			box-shadow: inset 0rpx 0rpx 4rpx rgba(255, 255, 255, .8);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: rotate(15deg);
			z-index: 9;

			.phone-btn-img {
				width: 80%;
				height: 80%;
			}

			.red-point {
				position: absolute;
				right: 5rpx;
				top: 8rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #e25850;
				z-index: 9;
				border: 1rpx solid rgba(2555, 255, 255, .6);

			}

		}



		.bottom-masker {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100%;
			height: 200rpx;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .8)100%);
			z-index: 6;

		}

		.bottom-btn {
			position: absolute;
			// left: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			// right: 180rpx;
			// bottom: 60rpx;
			height: 140rpx;
			bottom: 0rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			width: 100%;
			padding-bottom: 60rpx;
			box-sizing: content-box;
			z-index: 9;



			.btn-item {
				position: relative;
				width: 60rpx;
				// height: 60rpx;
				margin-right: 50rpx;
				// background-color: pink;
				pointer-events: fill;
				border-radius: 50%;
				// background-color: rgba(0, 0, 0, .1);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 60rpx;
					height: 60rpx;

					.icon-img {
						width: 100%;
						height: 100%;
					}
				}

				.btn-name {
					width: 100%;
					height: 30rpx;
					font-size: 20rpx;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .5);
					// position: absolute;
					// left: 0;
					// bottom: -28rpx;
					text-align: center;
					color: #fff;
					line-height: 30rpx;
				}

				&:last-child {
					margin-right: 0rpx;
				}

				.bag-btn-fly {
					position: absolute;
					right: -120rpx;
					top: -600rpx;
					width: 60rpx;
					height: 60rpx;
					z-index: -1;
					opacity: 0;
					background-color: rgba(255, 255, 255, .3);
					animation: goodFly 0.8s linear forwards;

					&::after {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						content: "";
						width: 100%;
						height: 2rpx;
						z-index: 9;
					}

					&::before {
						content: "";
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 100%;
						z-index: 2;
					}



				}

				.delay1 {
					animation: goodFly2 0.8s linear forwards;
					animation-delay: 0.08s;
				}

				.delay2 {
					animation-delay: 0.16s;
				}

				.delay3 {
					animation-delay: 0.24s;
				}

				.delay4 {
					animation-delay: 0.32s;
				}

				@keyframes goodFly {
					0% {
						opacity: 0.85;
						right: -120rpx;
						top: -600rpx;
						transform: scale(1);
					}

					10% {
						opacity: 1;
					}

					80% {
						opacity: 1;
						right: 0rpx;
						top: 0rpx;
						transform: scale(0.5);
					}

					100% {
						opacity: 0;
						transform: scale(0.5);
						right: 0rpx;
						top: 0rpx;
					}
				}


				@keyframes goodFly2 {
					0% {
						opacity: 0.85;
						right: -120rpx;
						top: -600rpx;
						transform: scale(1);
					}

					10% {
						opacity: 1;
					}

					80% {
						opacity: 1;
						right: 0rpx;
						top: 0rpx;
						transform: scale(0.5);
					}

					100% {
						opacity: 0;
						transform: scale(0.5);
						right: 0rpx;
						top: 0rpx;
					}
				}
			}

			.dice-btn {
				position: relative;
				width: 140rpx;
				height: 140rpx;
				border-radius: 0;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.dice-content {
					position: relative;
					width: 100%;
					height: 100%;
				}


				.power-box {
					position: absolute;
					// left: 0rpx;
					left: 50%;
					transform: translateX(-50%);
					bottom: -30rpx;
					width: 200rpx;
					height: 28rpx;


					.power-inner {
						position: relative;
						width: 120rpx;
						height: 28rpx;
						background-color: rgba(0, 0, 0, .1);
						border-radius: 14rpx;
						color: #fff;
						font-size: 18rpx;
						line-height: 28rpx;
						// text-align: center;
						box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .8);
						box-sizing: border-box;
						padding: 0rpx 20rpx;


						.add-icon {
							position: absolute;
							right: 5rpx;
							top: 50%;
							transform: translateY(-50%);

							width: 25rpx;
							height: 25rpx;

							box-sizing: border-box;
							padding: 5rpx;

							.add-icon-img {
								width: 100%;
								height: 100%;

							}


						}
					}


				}
			}

		}

		.active-banner {
			position: absolute;
			right: 30rpx;
			top: 200rpx;
			width: 200rpx;
			height: 75rpx;
			border-radius: 3rpx;
			box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);
			overflow: hidden;
			pointer-events: fill;
			z-index: 9;
		}

		.company-btn {
			bottom: 200rpx;
		}


		.go-pk {
			position: absolute;
			bottom: 35rpx;
			right: 60rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			// background-color: rgba(0, 0, 0, .1);
			display: flex;
			justify-content: center;
			align-items: center;
			animation: mbreath 1s linear infinite;
			pointer-events: fill;

			.go-pk-icon {
				width: 100rpx;
				height: 100rpx;
				pointer-events: fill;
			}

			.btn-name {
				width: 100%;
				height: 50rpx;
				font-size: 20rpx;
				text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .5);
				position: absolute;
				left: 0;
				bottom: 0rpx;
				text-align: center;
				color: #fff;
				line-height: 50rpx;
			}
		}

		@keyframes mbreath {

			0% {

				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}

		}

	}
</style>